<template>
  <a-modal :title="title" :visible="currentVisible" width="800px" :okText="type == 3 ? '关闭': '确定'" @ok="handleSubmit" @cancel="onCancel">
    <div v-if="type == 3 && !isDetails" style="color: #999;margin: -10px 0 10px;">内容快照为内容审核阶段的详情，仅用于内容审核复查使用</div>
    <a-alert v-if="currentDetails.literalReason || currentDetails.pictureReason" message="内容中红色标记的内容可能为敏感内容或图片，请重点核对" type="warning" show-icon />
    <template v-else>
      <a-alert v-if="currentDetails.status == 3" message="该内容将于设定的发布时间自动对外发布" type="info" show-icon />
    </template>
    <a-form-model
      ref="rulesForm"
      :model="form"
      :rules="rules"
      :labelCol="{ lg: { span: 5 }, sm: { span: 7 } }"
      :wrapperCol="{ lg: { span: 16 }, sm: { span: 17 } }"
    >
      <a-form-model-item label="内容ID">{{currentDetails.id}}</a-form-model-item>
      <a-form-model-item label="内容标题">
        <span class="content" v-if="currentDetails.id" v-html="currentDetails.contentTitle"></span>
      </a-form-model-item>
      <a-form-model-item label="内容正文">
        <span class="content" v-if="currentDetails.id" v-html="bodyContent"></span>
        <a-alert v-if="currentDetails.literalNote" :message="currentDetails.literalNote" type="error" />
      </a-form-model-item>
      <a-form-model-item label="图片/视频">
        <div class="media-list" >
            <template v-if="currentDetails.contentType == 0">
              <div class="media-item img" v-for="(item, index) in pictureVideo"  @click="handleShowImg(index, pictureVideo.map(e => e.url))" :key="index">
                <img class="media-item img" :src="item.url" alt="">
                <a-tooltip>
                  <a-icon type="exclamation-circle" class="icon" v-if="item.isViolations" />
                  <template slot="title">
                    {{ item.explain }}
                  </template>
                </a-tooltip>
              </div>
            </template>
            <div class="media-item video" v-if="currentDetails.contentType == 1">
              <a-tooltip>
                <a-icon type="exclamation-circle" class="icon" v-if="pictureVideo.length && pictureVideo[0].isViolations" />
                <template slot="title">
                  {{ pictureVideo[0].explain }}
                </template>
              </a-tooltip>
              <img  class="media-item video" @click="handlePreview(pictureVideo.map(e => e.url).join(','))" :src="currentDetails.cover" alt=""></img>
            </div>
          </div>
      </a-form-model-item>
      <a-form-model-item label="关联商品">
        <span class="img-wrapper" v-if="currentDetails.communityTopicAssGoodsDtoList && currentDetails.communityTopicAssGoodsDtoList.length">
          <div class="img-list">
            <a-tooltip v-for="(item, index) in currentDetails.communityTopicAssGoodsDtoList.slice(0, 5)"  :key="index">
              <img class="img" v-if="item.image" :src="item.image" alt="" @click="productVisible=true,productList=currentDetails.communityTopicAssGoodsDtoList" >
              <img class="img" v-else src="https://picttype1.jnby.com/community/goods/pl-goods.png" alt="" @click="productVisible=true,productList=currentDetails.communityTopicAssGoodsDtoList" />
              <template slot="title">
                {{item.brandName}}-{{item.productNo}}
              </template>
            </a-tooltip>
          </div>
          <div class="img-text" @click="productVisible=true,productList=currentDetails.communityTopicAssGoodsDtoList">共{{currentDetails.communityTopicAssGoodsDtoList.length}}件</div>
        </span>
      </a-form-model-item>
      <a-form-model-item label="关联话题">
        <a-tag color="#2db7f5" v-if="currentDetails.topicName">#{{currentDetails.topicName}}</a-tag>
      </a-form-model-item>
      <a-divider />
      <a-descriptions :column="2">
        <a-descriptions-item  label="发布人">{{ currentDetails.userNickname }}/{{ currentDetails.phone }}(社区ID：{{ currentDetails.communityId }})</a-descriptions-item>
        <a-descriptions-item label="发布人身份">{{ currentDetails.identityName }}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{currentDetails.createTime}}</a-descriptions-item>
        <a-descriptions-item label="更新时间">{{currentDetails.updateTime}}</a-descriptions-item>
        <template v-if="type == 1 || type == 3">
          <a-descriptions-item label="发布时间">{{currentDetails.releaseTime}}</a-descriptions-item>
          <a-descriptions-item label="发布渠道">{{currentDetails.releaseChannel}}</a-descriptions-item>
        </template>
      </a-descriptions>
      <template v-if="type == 1">
        <a-divider />
        <h4 style="font-weight: bold;">审核意见</h4>
        <a-row v-if="form.status==0">
          <a-col :span="24">
            <a-form-model-item>
              <a-radio-group v-model="form.status">
                <a-radio value="4">审核不通过</a-radio>
                <a-radio value="0">审核通过</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item style="margin-top: -30px;" :labelCol="{ span: 24 }" label="选择内容评级（单选）" prop="contentLevel">
              <a-radio-group v-model="form.contentLevel">
                <a-radio value="A">A类</a-radio>
                <a-radio value="B">B类</a-radio>
                <a-radio value="C">C类</a-radio>
                <a-radio value="D">D类</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row v-if="form.status==4">
          <a-col :span="12">
            <a-form-model-item>
              <a-radio-group v-model="form.status">
                <a-radio value="4">审核不通过</a-radio>
                <a-radio value="0">审核通过</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item style="margin-top: -30px;" :labelCol="{ span: 24 }" label="选择审核不通过原因（多选）" prop="why">
              <a-checkbox-group v-model="form.why">
               <a-checkbox v-for="item in whyList" :value="item" :key="item.id">{{ item.whyName }}</a-checkbox>
              </a-checkbox-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :labelCol="{ span: 24 }" label="备注">
              <a-textarea
                style="width: 100%;"
                v-model="form.auditNote"
                :rows="4"
                :maxLength="60"
                placeholder="其他原因请备注，最多输入60字"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </template>
    </a-form-model> 
    <ParagraphPic :current="imgCurrent" :visible.sync="imgVisible" :imgs="imgs"></ParagraphPic>
    <PreviewVideo :visible.sync="previewVisible" :videoUrl="videoUrl"></PreviewVideo>
    <ProductListModal :visible.sync="productVisible" :productList="productList"></ProductListModal>
  </a-modal>
</template>

<script>
  import ParagraphPic from '../components/ParagraphPic'
  import PreviewVideo from '../components/PreviewVideo'
  import ProductListModal from '../components/ProductListModal'
  export default {
    data() {
      return {
        form: {
          status: '4'
        },
        imgCurrent: 0,
        imgVisible: false,
        imgs: [],
        videoUrl: '',
        previewVisible: false,
        rules: {
          contentLevel: [
            { required: true, message: '请选择', trigger: 'change' },
          ],
          why: [
            { required: true, message: '请选择', trigger: 'change' },
          ]
        },
        productVisible: false,
        productList:[],
        }
    },
    components: {
      ParagraphPic,
      PreviewVideo,
      ProductListModal
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      type: { // 1: 审核 2: 详情 3:审核记录-详情
        type: [Number, String],
        default: 1
      },
      isDetails: { // 是否是举报管理的详情弹窗
        type: Boolean,
        default: false
      },
      details: {
        type: Object,
        default: {}
      },
      bodyContent: {
        type: String,
        default: ''
      },
      pictureVideo: {
        type: [Object, Array],
        default: () => {}
      },
      whyList: {
        type: [Object, Array],
        default: () => {}
     }
    },
    computed: {
      currentVisible: {
        get() {
          return this.visible
        },
        set(val) {
          this.$emit('update:visible', val)
        }
      },
      currentDetails: {
        get() {
          return this.details
        },
        set(val) {
          this.$emit('update:details', val)
        }
      },
      title() {
        let title = '内容审核'
        if (this.type == 1 ) title = '内容审核'
        if (this.type == 2 ) title = '内容审核'
        if (this.type == 3 ) title = '内容快照'
        if (this.type == 3 && this.isDetails ) title = '内容详情'
        if (this.type == 2 && this.isDetails ) title = '内容详情'
        return title
      }
    },
    filters: {
    },
    created() {
    },
    methods: {
      onCancel() {
        this.currentVisible = false
        this.currentDetails = {}
        this.form = {
          status: '4'
        }
      },

      // 查看大图
      handleShowImg(index, productImgList){
        this.imgCurrent = index
        this.imgVisible = true
        this.imgs= productImgList
      },

      // 预览视频
      handlePreview(url) {
        this.videoUrl = url
        this.previewVisible = true
      },

      // 确定
      handleSubmit() {
        if (this.type != 1){
          this.currentVisible=false
        } else {
          this.$refs.rulesForm.validate(valid => {
            if (valid) {
               this.$emit('onOk', this.form)
               this.onCancel()
            } else {
              console.log('error submit!!');
              return false;
            }
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/.ant-checkbox-wrapper{
    margin-left: 0;
    margin-right: 8px;
  }
  .content{
    line-height: 20px!important;
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
    word-break: break-all;
  }
  .img /deep/ .ant-upload-list {
    display: none;
  }

  .my-img-list-wrapper {
    display: flex;
    flex-wrap: wrap;
  }

  .my-img-list {
    display: flex;
    flex-wrap: wrap;
  }

  .my-img-item {
    position: relative;
    width: 104px;
    height: 104px;
    padding: 8px;
    margin: 0 8px 30px 0;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
  }

  .my-img-item.red {
    border-color: #f5222d;
  }

  .my-img-item-con {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .my-img-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .my-img-item i {
    margin: 0 4px;
    cursor: pointer;
  }

  .my-img-item i svg {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
  }

  .my-img-action {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 102px;
    background: rgba(0, 0, 0, 0.3);
  }

  .my-img-item .my-img-item-con:hover .my-img-action {
    display: block;
  }

  .my-img-item .move-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -22px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 22px;
  }

  .img /deep/ .ant-upload-picture-card-wrapper {
    width: auto;
  }
  .media-list{
    display: flex;
    flex-wrap: wrap;
    .media-item{
      position: relative;
      margin: 0 10px 10px 0;
      cursor: pointer;
      .icon{
        position: absolute;
        right: 5px;
        top: 5px;
        color: red;
      }
      &.img{
        width: 72px;
        height: 72px;
      }
      &.video{
        position: relative;
        width: 120px;
        height: 120px;
        cursor: pointer;
          .icon{
          position: absolute;
          right: 5px;
          top: 5px;
          color: red;
          z-index: 3;
        }
      }
    }
  }
  .img-wrapper {
    display: flex;

    .img-list {
      display: flex;
    }

    .img-text {
      margin-left: 5px;
      line-height: 60px;
      color: #999;
    }
  }
  .img {
    display: block;
    margin: 0 2px;
    width: 60px;
    height: 60px;
    border: 1px dashed #f5f5f5;
    object-fit: scale-down;
    cursor: pointer;
  }
</style>
